<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>销售信息查询</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap的js文件-->
    <script src="js/bootstrap.js"></script>

    <script>
        $(function () {
            $.get("findDep",function (data) {
                var li = '';
                li+='<label for="depId">部门</label>\n' +
                    '            <select id="depId" name="depId" class="form-control">\n' +
                    '                <option value="-1" >全部</option>';
                for (var i = 0; i <data.length ; i++) {
                    lis='<option value="'+data[i].depId+'">'+data[i].depname+'</option>';
                    li+=lis;
                }
                li+='</select>';
                $("#depInfo").html(li);
            });

            load("","","");
            $("#btn_search").click(function () {
                var like_name = $("#likeName").val();
                var depId = $("#depId").val();

                //alert(like_name);
               // alert(depId);
                load(null,like_name,depId);
            });


        });

        //发送ajax请求， 请求list，传递likeName， sex

        function load(currentPage,like_name,depId){
            $.get("EmpPageQuery", {currentPage:currentPage,like_name: like_name,depId:depId}, function (data) {
                $("#totalPage").html(data.totalPage);
                $("#totalCount").html(data.totalCount);

                var pageList = '';
                var before = data.currentPage-1;
                if(before <=0 ){
                    before = 1;
                }
                pageList+='<li onclick="javascript:load('+before+',\''+like_name+'\',\''+depId+'\')"><a href="javascript:void(0)">上一页</a></li>';
                for (var c = 1; c <= data.totalPage; c++){
                    var li ='<li onclick="javascript:load('+c+',\''+like_name+'\',\''+depId+'\')"><a href="javascript:void(0)">'+c+'</a></li>';
                    pageList+=li;
                }
                var nextNum = data.currentPage+1;
                if(nextNum>data.totalPage){
                    nextNum=data.totalPage;
                }
                pageList+='<li onclick="javascript:load('+nextNum+',\''+like_name+'\',\''+depId+'\')"><a href="javascript:void(0)">下一页</a></li>';

                $("#pageNo").html(pageList);

                var info = '';
                for (var i = 0; i <data.list.length ; i++) {
                    var json = data.list[i];
                    var tr = '<tr>\n' +
                        '                    <td>'+json.empId+'</td>\n' +
                        '                    <td>'+json.name+'</td>\n' +
                        '                    <td>'+json.depId+'</td>\n' +
                        '                    <td>'+json.depname+'</td>\n' +
                        '                </tr>';
                    info+=tr;
                }
                $("#info").html(info);

            });
        }

    </script>
</head>
<body>

<div class="container" style="padding-top:50px ">
    <div class="row">
        <div class="col-md-3 form-group">
            <label for="likeName">工号</label>
            <input type="text" class="form-control" id="likeName" name="likeName">
        </div>
        <div class="form-group col-md-3" id="depInfo">
            <label for="depId">部门</label>
            <select id="depId" name="depId" class="form-control">
                <option value="-1" >全部</option>
                <option value="1" >男</option>
                <option value="2" >女</option>
            </select>
        </div>
        <div class="col-md-1">
            <button type="submit" class="btn btn-default" id="btn_search" style="margin-top: 20px">搜索</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <table class="table table-hover table-striped" style="margin-left: 100px" >
                <thead>
                <tr>
                    <td>工号</td>
                    <td>姓名</td>
                    <td>部门编号</td>
                    <td>部门名称</td>
                </tr>
                </thead>
                <tbody id="info">
                    <tr>
                        <td>工号</td>
                        <td>姓名</td>
                        <td>部门编号</td>
                        <td>部门名称</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="page_num_inf col-md-6">
            <i></i>共
            <span id="totalPage"></span>页 <span id="totalCount"></span>条
        </div>
        <div class="col-md-8">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pageNo">
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">下一页</a></li>
                </ul>
            </nav>
        </div>
</div>
</div>
</body>
</html>